<template>
  <div class="p-2">
    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
      <div class="mb-[10px]" v-show="showSearch">
        <el-card shadow="hover">
          <el-form ref="queryFormRef" :model="queryParams"   :inline="true" label-width="110px" label-suffix=":">
            <el-form-item label="创建时间" >
              <el-date-picker
                v-model="dateRange"
                style="width: 240px"
                value-format="YYYY-MM-DD"
                type="daterange"
                :clearable="false"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              ></el-date-picker>
            </el-form-item>
            <template v-if="isShrink">
            <el-form-item label="代发批次号" >
              <el-input  v-model="queryParams.billNo" placeholder="请输入批次号" clearable style="width: 240px"  />
            </el-form-item>
            <el-form-item label="付款方名称" >
              <el-input   v-model="queryParams.payerName" placeholder="请输入付款方名称" clearable style="width: 240px"/>
            </el-form-item>
            <el-form-item label="收款方名称" >
              <el-input   v-model="queryParams.payeeName" placeholder="请输入收款方名称" clearable style="width: 240px"/>
            </el-form-item>
            <el-form-item label="三方流水号" >
              <el-input   v-model="queryParams.bankNo" placeholder="请输入三方流水号" clearable style="width: 240px"/>
            </el-form-item>
            <el-form-item label="交易类型" >
              <el-select  v-model="queryParams.tranType" placeholder="请选择交易类型" clearable style="width: 240px">
                <el-option v-for="dict in tran_type" :key="dict.value" :label="dict.label" :value="dict.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="支付通道" >
              <el-select  v-model="queryParams.channel" placeholder="请选择支付通道" clearable style="width: 240px">
                <el-option v-for="dict in pay_channel" :key="dict.value" :label="dict.label" :value="dict.value" />
              </el-select>
            </el-form-item>
            </template>
            <el-form-item>
              <el-button type="primary" @click="handleQuery" icon="Search"  >搜索</el-button>
              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
              <a class="my-link" @click="shrinkClick" v-if="isShrink">精简模式<el-icon><ArrowUp /></el-icon></a>
              <a class="my-link"  @click="shrinkClick" v-if="!isShrink">高级模式<el-icon><ArrowDown /></el-icon></a>
            </el-form-item>
          </el-form>
        </el-card>

      </div>
    </transition>



    <el-card shadow="hover">
      <template #header>
        <el-row :gutter="10">
          <el-col :span="1.5">
            <el-button type="warning" plain icon="Download" @click="handleExport" >交易流水导出</el-button>
          </el-col>
        </el-row>
      </template>
      <el-table ref="roleTableRef"  v-loading="tableloading"  :data="operList"  border>
        <el-table-column label="创建时间" align="center" prop="addTime"  width="160" >
          <template #default="scope">
            <span>{{ parseTime(scope.row.addTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="代发批次号" align="center" prop="billNo" width="160" :show-overflow-tooltip="true" />
        <el-table-column label="企业流水号" align="center" prop="busNo" :show-overflow-tooltip="true" width="160" />
        <el-table-column label="三方流水号" align="center"  prop="bankNo" :show-overflow-tooltip="true" width="160" >
        </el-table-column>
        <el-table-column label="交易订单号" align="center" prop="tranNo" width="150"  :show-overflow-tooltip="true" >
        </el-table-column>

        <el-table-column label="付款方名称" align="center" prop="payerName" width="150" :show-overflow-tooltip="true" />
        <el-table-column label="付款方账号" align="center" prop="payerAcc" width="150" :show-overflow-tooltip="true" />
          <el-table-column label="收款方户名" align="center" prop="payeeName" :show-overflow-tooltip="true" width="200" />
        <el-table-column label="收款方账号"  align="center"  prop="payeeAcc" :show-overflow-tooltip="true" width="230" />
        <el-table-column label="支付通道" align="center"  prop="channel" :show-overflow-tooltip="true" width="120" />
        <el-table-column label="交易类型" align="center" prop="tranType" :show-overflow-tooltip="true" width="120" >
          <template #default="scope">
              <dict-tag :options="tran_type" :value="scope.row.tranType" />
            </template>
        </el-table-column>
        <el-table-column label="交易金额(元)" align="center" prop="moneyStr" :show-overflow-tooltip="true" width="120" >
          <template #default="scope">
                <span>{{ convertFenToYuan(scope.row.money) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="交易状态" align="center" prop="tranStatus" :show-overflow-tooltip="true" width="120" >
          <template #default="scope">
                <dict-tag :options="tran_status" :value="scope.row.tranStatus" />
           </template>
       </el-table-column>

        <el-table-column label="业务描述" align="center" prop="busDesc" :show-overflow-tooltip="true" width="150" />
        <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" width="150" />
        <el-table-column fixed="right" align="center" label="操作" width="160"  v-if="userRole != 9">
          <template #default="scope">
              <el-tag link type="primary"   @click="downPz(scope.row)" >查看电子回单</el-tag>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-if="total > 0"
        v-model:total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </el-card>

  </div>

</template>

<script  setup name="balance" lang="ts">

import {merchantFlows,sydFlows} from "@/api/account/tradeLog/index";
import useUserStore from '@/store/modules/user'
  const router = useRouter();
  const { proxy } = getCurrentInstance() as ComponentInternalInstance;
  const queryFormRef = ref<ElFormInstance>();
  const tableloading = ref(false)
  const operList = ref([])
  const total = ref(0)
  const isShrink = ref(false)
  const userRole = ref(0)
  const queryParams = ref({
    params:{
      begin_time:"",
      end_time:""

    },
    billNo:"",
    payerName:'',
    payeeName:'',
    bankNo:'',
    tranType:null,
    channel:null,
    pageSize:10,
    pageNum:1
  });
  const showSearch = ref(true);
  const dateRange = ref(['', '']);
  const { tran_type } = toRefs<any>(proxy?.useDict('tran_type'));
  const { pay_channel } = toRefs<any>(proxy?.useDict('pay_channel'));
  const { tran_status } = toRefs<any>(proxy?.useDict('tran_status'));



  const  downPz =(row:any)=>{
    if(!row.payReceipt){
      proxy?.$modal.msgError(`暂无电子回单!`);
      return;
    }
    proxy?.download("/resource/oss/dlurl", {
     url:row.payReceipt,
    }, `${row.payeeName}_支付凭证.pdf`);
  }



  const convertFenToYuan = (fen)=>{
    if(!fen){
      return '--';
    }
    return (fen / 100).toFixed(2);
  }

  /** 重置按钮操作 */
  const resetQuery = () => {
    dateRange.value = ['', '']
    queryFormRef.value?.resetFields();
    initDate();
    queryParams.value.pageNum = 1;
  }


  const shrinkClick = ()=>{
    if(isShrink.value){
      isShrink.value = false
    }else{
      isShrink.value = true
    }

  }

  const initDate = ()=>{

    // 获取当前日期
    let currentDate = new Date();
    // 创建一个新的Date对象，设置为当前月份的第一天
    let firstDayOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1);
    dateRange.value = [firstDayOfMonth.Format('yyyy-MM-dd'),currentDate.Format('yyyy-MM-dd')]
    queryParams.value.params.begin_time  = firstDayOfMonth.Format('yyyy-MM-dd');
    queryParams.value.params.end_time  = currentDate.Format('yyyy-MM-dd');
  }

/**  查询 */
  const handleQuery = ()=>{
    queryParams.value.pageNum = 1;
    queryParams.value.params.begin_time = dateRange.value[0]
    queryParams.value.params.end_time = dateRange.value[1]

    getList();
  }

 /**
  * 查询列表
  */
 const getList = () => {
   tableloading.value = true
   if(userRole.value == 6){
     sydFlows(queryParams.value).then(res => {
       operList.value = res.rows
       total.value = res.total
       tableloading.value = false
     })
   }else if(userRole.value == 9){
     merchantFlows(queryParams.value).then(res => {
       operList.value = res.rows
       total.value = res.total
       tableloading.value = false
     })
   }else if(userRole.value == 5){
    tableloading.value = false
   }

 }

 const roleTableRef = ref();

 /** 导出按钮操作 */
 const handleExport = () => {
  if(userRole.value == 6){
    let columns = roleTableRef.value.columns;
    let fields1 =  [];
    columns.forEach(item=>{
      fields1.push(item.property);
    })

    proxy?.download("/payment/sydFlows/export", {
      ...queryParams.value,
      fields:fields1.join(",")
    }, `交易流水_${new Date().getTime()}.xlsx`);
  }else if(userRole.value == 9){
    proxy?.download("/payment/merchantFlows/export", {
      ...queryParams.value,
    }, `交易流水_${new Date().getTime()}.xlsx`);

  }
 };


  onMounted(() => {
    let curRoleId = useUserStore().curRoleId;
    userRole.value = curRoleId;
    initDate();
    getList();
  });

</script>

<style>


.my-link,.my-link:hover {
    /* 鼠标悬停时的样式 */
   color: #1890ff;
   text-decoration: none;
   background-color: transparent;
   outline: none;
   cursor: pointer;
   transition: color .3s;
   -webkit-text-decoration-skip: objects;
   padding-left:10px;
}

</style>
